<template>
  <div class="foodList_wrapper">
    <div class="shop_ad">
      <img class="pic" src="https://cube.elemecdn.com/e/16/ed35f184a9e2b09b9eb34200398e9png.png?x-oss-process=image/format,webp/resize,w_686">
    </div>
    <div class="food_list">
      <div class="menu_container">
        <div class="menu_left" id="wrapper_menu" ref="wrapperMenu">
          <ul>
            <li class="menu_item active">
              <span>超值折扣</span>
              <span class="cart_list_length">1</span>
            </li>
            <li class="menu_item">
              <span>招牌拌面</span>
            </li>
            <li class="menu_item">
              <span>任意加料</span>
            </li>
            <li class="menu_item">
              <span>清凉一夏</span>
            </li>
            <li class="menu_item">
              <span>吃面诀窍</span>
            </li>
            <li class="menu_item">
              <span>匠心传承</span>
            </li>
            <li class="menu_item">
              <span>超值折扣</span>
            </li>
            <li class="menu_item">
              <span>招牌拌面</span>
            </li>
            <li class="menu_item">
              <span>任意加料</span>
            </li>
            <li class="menu_item">
              <span>清凉一夏</span>
            </li>
            <li class="menu_item">
              <span>吃面诀窍</span>
            </li>
            <li class="menu_item">
              <span>匠心传承</span>
            </li>
            <li class="menu_item">
              <span>超值折扣</span>
            </li>
            <li class="menu_item">
              <span>招牌拌面</span>
            </li>
            <li class="menu_item">
              <span>任意加料</span>
            </li>
            <li class="menu_item">
              <span>清凉一夏</span>
            </li>
            <li class="menu_item">
              <span>吃面诀窍</span>
            </li>
            <li class="menu_item">
              <span>匠心传承</span>
            </li>
          </ul>
        </div>
        <div class="menu_right" ref="menuFoodList">
          <dl>
            <dt>
              <header class="menu_detail_header">
                <div class="menu_detail_header_left">
                  <strong class="menu_item_title">超值折扣</strong>
                  <span class="menu_item_description">是的方式分多少</span>
                </div>
              </header>
            </dt>
            <dd>
              <div class="food_item" @click="openFoodDetail">
                <div class="food_img"><img src="https://cube.elemecdn.com/c/6d/856eaac0db34052f82142e2638ad8jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_140,h_140/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp" /></div>
                <div class="food_info">
                  <h3><span>让你尖叫套餐</span></h3>
                  <p class="food_desc">套餐包含：黑椒大猪排面+一口肠1个+虾卷1条+尖叫纤维味550ml主要原料：其他</p>
                  <p class="food_sales">
                    <span>月售200份</span>
                    <span>好评率100%</span>
                  </p>
                  <p class="food_activity">
                    <span sales="4.5折">4.5折</span>
                    <span sales="每单限10份优惠">每单限10份优惠</span>
                  </p>
                  <p class="food_price">
                    <span>19.9</span>
                    <del>¥42.9</del>
                  </p>
                  <div class="food_button">
                    <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                    <span class="count">1</span>
                    <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
                  </div>
                </div>
              </div>
              <div class="food_item" @click="openFoodDetail">
                <div class="food_img"><img src="https://cube.elemecdn.com/c/6d/856eaac0db34052f82142e2638ad8jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_140,h_140/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp" /></div>
                <div class="food_info">
                  <h3><span>让你尖叫套餐</span></h3>
                  <p class="food_desc">套餐包含：黑椒大猪排面+一口肠1个+虾卷1条+尖叫纤维味550ml主要原料：其他</p>
                  <p class="food_sales">
                    <span>月售200份</span>
                    <span>好评率100%</span>
                  </p>
                  <p class="food_activity">
                    <span sales="4.5折">4.5折</span>
                    <span sales="每单限10份优惠">每单限10份优惠</span>
                  </p>
                  <p class="food_price">
                    <span>19.9</span>
                    <del>¥42.9</del>
                  </p>
                  <div class="food_button">
                    <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                    <span class="count">1</span>
                    <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
                  </div>
                </div>
              </div>
              <div class="food_item" @click="openFoodDetail">
                <div class="food_img"><img src="https://cube.elemecdn.com/c/6d/856eaac0db34052f82142e2638ad8jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_140,h_140/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp" /></div>
                <div class="food_info">
                  <h3><span>让你尖叫套餐</span></h3>
                  <p class="food_desc">套餐包含：黑椒大猪排面+一口肠1个+虾卷1条+尖叫纤维味550ml主要原料：其他</p>
                  <p class="food_sales">
                    <span>月售200份</span>
                    <span>好评率100%</span>
                  </p>
                  <p class="food_activity">
                    <span sales="4.5折">4.5折</span>
                    <span sales="每单限10份优惠">每单限10份优惠</span>
                  </p>
                  <p class="food_price">
                    <span>19.9</span>
                    <del>¥42.9</del>
                  </p>
                  <div class="food_button">
                    <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                    <span class="count">1</span>
                    <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
                  </div>
                </div>
              </div>
              <div class="food_item" @click="openFoodDetail">
                <div class="food_img"><img src="https://cube.elemecdn.com/c/6d/856eaac0db34052f82142e2638ad8jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_140,h_140/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp" /></div>
                <div class="food_info">
                  <h3><span>让你尖叫套餐</span></h3>
                  <p class="food_desc">套餐包含：黑椒大猪排面+一口肠1个+虾卷1条+尖叫纤维味550ml主要原料：其他</p>
                  <p class="food_sales">
                    <span>月售200份</span>
                    <span>好评率100%</span>
                  </p>
                  <p class="food_activity">
                    <span sales="4.5折">4.5折</span>
                    <span sales="每单限10份优惠">每单限10份优惠</span>
                  </p>
                  <p class="food_price">
                    <span>19.9</span>
                    <del>¥42.9</del>
                  </p>
                  <div class="food_button">
                    <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                    <span class="count">1</span>
                    <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
                  </div>
                </div>
              </div>
              <div class="food_item" @click="openFoodDetail">
                <div class="food_img"><img src="https://cube.elemecdn.com/c/6d/856eaac0db34052f82142e2638ad8jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_140,h_140/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp" /></div>
                <div class="food_info">
                  <h3><span>让你尖叫套餐</span></h3>
                  <p class="food_desc">套餐包含：黑椒大猪排面+一口肠1个+虾卷1条+尖叫纤维味550ml主要原料：其他</p>
                  <p class="food_sales">
                    <span>月售200份</span>
                    <span>好评率100%</span>
                  </p>
                  <p class="food_activity">
                    <span sales="4.5折">4.5折</span>
                    <span sales="每单限10份优惠">每单限10份优惠</span>
                  </p>
                  <p class="food_price">
                    <span>19.9</span>
                    <del>¥42.9</del>
                  </p>
                  <div class="food_button">
                    <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                    <span class="count">1</span>
                    <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
                  </div>
                </div>
              </div>
              <div class="food_item" @click="openFoodDetail">
                <div class="food_img"><img src="https://cube.elemecdn.com/c/6d/856eaac0db34052f82142e2638ad8jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_140,h_140/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp" /></div>
                <div class="food_info">
                  <h3><span>让你尖叫套餐</span></h3>
                  <p class="food_desc">套餐包含：黑椒大猪排面+一口肠1个+虾卷1条+尖叫纤维味550ml主要原料：其他</p>
                  <p class="food_sales">
                    <span>月售200份</span>
                    <span>好评率100%</span>
                  </p>
                  <p class="food_activity">
                    <span sales="4.5折">4.5折</span>
                    <span sales="每单限10份优惠">每单限10份优惠</span>
                  </p>
                  <p class="food_price">
                    <span>19.9</span>
                    <del>¥42.9</del>
                  </p>
                  <div class="food_button">
                    <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                    <span class="count">1</span>
                    <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
                  </div>
                </div>
              </div>
            </dd>
          </dl>
          <transition name="toggle-cart">
            <div class="food_panel" v-show="showFoodDetail">
              <div class="close" @click="closeFoodDetail"><span class="iconfont">&#xe615;</span></div>
              <div class="con">
                <div class="food_img"><img src="https://cube.elemecdn.com/c/6d/856eaac0db34052f82142e2638ad8jpeg.jpeg?x-oss-process=image/resize,m_lfit,w_376,h_376/watermark,g_se,x_4,y_4,image_YS8xYS82OGRlYzVjYTE0YjU1ZjJlZmFhYmIxMjM4Y2ZkZXBuZy5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8yOA%3D%3D/quality,q_90/format,webp" /></div>
                <div class="food_info">
                  <h3><span>让你尖叫套餐</span></h3>
                  <p class="food_sales">
                    <span>月售200份</span>
                    <span>好评率100%</span>
                  </p>
                  <div class="food_operation">
                    <p class="food_price">
                      <span>19.9</span>
                      <del>¥42.9</del>
                    </p>
                    <p class="food_activity">
                      <span sales="4.5折">4.5折</span>
                      <span sales="每单限10份优惠">每单限10份优惠</span>
                    </p>
                    <div class="food_button">
                      <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                      <span class="count">1</span>
                      <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
                    </div>
                  </div>
                  <p class="food_desc">套餐包含：黑椒大猪排面+一口肠1个+虾卷1条+尖叫纤维味550ml主要原料：其他</p>
                  <p class="explain">价格说时<span class="iconfont">&#xe66b;</span></p>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <div class="buy_cart_container" @click="toggleCartList">
      <div class="cart_icon_num empty">
        <span class="cart_list_length">
          2
        </span>
      </div>
      <div class="cart_num">
        <p>未选购商品</p>
        <p>另需配送费¥3.1元</p>
      </div>
      <div class="gotopay btn_disabled">
        <span>¥0起送</span>
      </div>
    </div>
    <transition name="toggle-cart">
      <div class="cart_food_list" v-show="showCartList">
        <div class="tag">已减4.2元</div>
        <header>
          <h4>购物车</h4>
          <div class="clear_cart">
            <span class="iconfont">&#xe60e;</span>
            <span>清空</span>
          </div>
        </header>
        <div class="cart_food_details" id="cartFood">
          <ul>
            <li class="cart_food_li">
              <div class="cart_list_num">
                <p class="ellipsis">零添加，不含胶，不坨面</p>
                <p class="ellipsis"></p>
              </div>
              <div class="cart_list_price">
                <del>¥28</del>
                <span>¥</span>
                <span>9.99</span>
              </div>
              <div class="cart_list_control">
                <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                <span class="count">1</span>
                <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
              </div>
            </li>
            <li class="cart_food_li">
              <div class="cart_list_num">
                <p class="ellipsis">味友牛杂面线（单人食）</p>
                <p class="ellipsis"></p>
              </div>
              <div class="cart_list_price">
                <del>¥28</del>
                <span>¥</span>
                <span>9.99</span>
              </div>
              <div class="cart_list_control">
                <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                <span class="count">1</span>
                <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
              </div>
            </li>
            <li class="cart_food_li">
              <div class="cart_list_num">
                <p class="ellipsis">鲍鱼鸡套餐</p>
                <p class="ellipsis"></p>
              </div>
              <div class="cart_list_price">
                <del>¥28</del>
                <span>¥</span>
                <span>9.99</span>
              </div>
              <div class="cart_list_control">
                <a href="#" class="minus"><span class="iconfont">&#xe60c;</span></a>
                <span class="count">1</span>
                <a href="#" class="add"><span class="iconfont">&#xe686;</span></a>
              </div>
            </li>
            <li class="cart_food_li">
              <div class="cart_list_num">
                <p class="ellipsis">餐盒</p>
                <p class="ellipsis"></p>
              </div>
              <div class="cart_list_price">
                <span>¥</span>
                <span>9.99</span>
              </div>
              <div class="cart_list_control">
              </div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
    <transition name="showcover">
      <div class="mask" v-show="showCartList" @click="toggleCartList"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'FoodList',
  data () {
    return {
      isFixed: false,
      showCartList: false, // 显示购物车列表
      showFoodDetail: false // 显示购物车列表
    }
  },
  methods: {
    // 控制购物列表是否显示
    toggleCartList () {
      this.showCartList = !this.showCartList
    },
    openFoodDetail () {
      this.showFoodDetail = true
    },
    closeFoodDetail () {
      this.showFoodDetail = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .shop_ad
    padding: .14rem .32rem 0
    img
      border-radius: .08rem
  .food_list
    height: 626px
    .menu_container
      height: 100%
      display: flex
      padding-bottom: .96rem
      background-color: #fff
      box-sizing: border-box
      .menu_left
        width: 1.54rem
        height: 100%
        overflow-y: auto
        padding-bottom: .7rem
        box-sizing: border-box
        background-color: #f8f8f8
        li
          position: relative
          padding: .32rem .15rem
          font-size: .24rem
          color: #666
          &.active
            color: #333
            background-color: #fff
          .cart_list_length
            position: absolute
            right: .08rem
            top: .08rem
            line-height: 1
            background-image: linear-gradient(-90deg,#ff7416,#ff3c15 98%)
            color: #fff
            border-radius: .32rem
            padding: .04rem .1rem
            font-size: .20rem
            transform: scale(0.9)
      .menu_right
        flex: 1
        position: relative
        height: 100%
        overflow-y: auto
        box-sizing: border-box
        padding: 0 .3rem .7rem .2rem
        .menu_detail_header
          padding: .15rem .6rem .15rem 0
          .menu_item_title
            margin-right: .1rem
            font-weight: 700
            font-size: .24rem
            color: #666
        .food_item
          padding: .2rem 0
          display: flex
          justify-content: space-between
          position: relative
          .food_img
            width: 1.9rem
            height: 1.9rem
            margin-right: .2rem
          .food_info
            flex: 1
            width: 3rem
            h3 span
              color: #333
              font-weight: 700
              overflow: hidden
              font-size: .3rem
              line-height: .3rem
              white-space: nowrap
              ellipsis()
            p
              color: #999
              text-align: left
              white-space: nowrap
              ellipsis()
            .food_desc, .food_sales
              margin: .05rem 0
              transform: scale(0.9)
              transform-origin: 0 0
            .food_activity span
              position: relative
              color: transparent
              white-space: nowrap
              &:after
                content: attr(sales)
                border-radius: .1rem
                border: .01rem solid #ffc9c1
                color: #eb6551
                position: absolute
                left: 0
                top: 0
                right: -100%
                transform: scale(.5)
                transform-origin: 0 0
                display: flex
                align-items: center
                justify-content: center
                font-size: .4rem
            .food_price
              margin-top: .1rem
              font-size: .36rem
              color: #ff5339
              line-height: .36rem
              display: flex
              align-items: baseline
              &:before
                content: "\A5"
                font-size: .3rem
                display: inline-block
              del
                font-size: .24rem
                color: #999
                margin-left: .12rem
            .food_button
              position: absolute
              right: 0
              bottom: .15rem
              display: flex
              align-items: center
              a
                width: .44rem
                height: .44rem
                display: block
                color: #fff
                text-align: center
                line-height: .44rem
                border-radius: 100%
                background: #2396ff
                box-sizing: border-box
                .iconfont
                  font-size: .24rem
              a.minus
                color: #2396ff
                background: #fff
                border: .01rem #2396ff solid
              span
                width: .5rem
                font-size: .28rem
                text-align: center
        .food_panel
          position: fixed
          top: 0
          left: 0
          height: 100%
          width: 100%
          z-index: 9998
          .close
            width: .56rem
            height: .56rem
            border-radius: 50%
            background-color: rgba(0,0,0,.2)
            display: flex
            align-items: center
            justify-content: center
            position: absolute
            z-index: 1
            top: .2rem
            right: .3rem
            .iconfont
              color: #fff
              font-size: .4rem
          .con
            position: relative
            background-color: #fff
            flex-direction: column
            width: 100%
            height: 100%
            overflow-y: auto
            padding-bottom: 2rem
            .food_img
              width: 100%
              height: 7.5rem
              display: block
              img
                width: 100%
                height: 100%
            .food_info
              padding: .3rem .3rem 0
              h3 span
                color: #333
                font-weight: 700
                overflow: hidden
                font-size: .4rem
                line-height: .4rem
                white-space: nowrap
                ellipsis()
              p
                color: #666
                text-align: left
              .food_desc, .food_sales
                margin: .15rem 0
              .food_operation
                display: flex
                align-items: baseline
                position: relative
                .food_activity span
                  position: relative
                  color: transparent
                  white-space: nowrap
                  &:after
                    content: attr(sales)
                    border-radius: .1rem
                    border: .01rem solid #ffc9c1
                    color: #eb6551
                    position: absolute
                    left: 0
                    top: 0
                    right: -100%
                    transform: scale(.5)
                    transform-origin: 0 0
                    display: flex
                    align-items: center
                    justify-content: center
                    font-size: .4rem
                .food_price
                  margin: .1rem .2rem 0 0
                  font-size: .36rem
                  color: #ff5339
                  line-height: .36rem
                  display: flex
                  align-items: baseline
                  &:before
                    content: "\A5"
                    font-size: .3rem
                    display: inline-block
                  del
                    font-size: .24rem
                    color: #999
                    margin-left: .12rem
                .food_button
                  position: absolute
                  right: 0
                  bottom: 0
                  display: flex
                  align-items: center
                  a
                    width: .44rem
                    height: .44rem
                    display: block
                    color: #fff
                    text-align: center
                    line-height: .44rem
                    border-radius: 100%
                    background: #2396ff
                    box-sizing: border-box
                    .iconfont
                      font-size: .24rem
                  a.minus
                    color: #2396ff
                    background: #fff
                    border: .01rem #2396ff solid
                  span
                    width: .5rem
                    font-size: .28rem
                    text-align: center
              .explain
                margin-top: .1rem
                .iconfont
                  margin-left: .03rem
                  font-size: .26rem
  .buy_cart_container
    position: fixed
    right: 0
    bottom: 0
    left: 0
    z-index: 9999
    display: flex
    -webkit-align-items: center
    align-items: center
    padding-left: 1.58rem
    background-color: rgba(61,61,63,.9)
    height: .96rem
    .cart_icon_num
      position: absolute
      left: .25rem
      bottom: .15rem
      width: 1rem
      height: 1rem
      box-sizing: border-box
      border-radius: 100%
      background-color: #3190e8
      border: .1rem solid #444
      box-shadow: 0 -0.08rem 0.053333rem 0 rgba(0,0,0,.1)
      will-change: transform
      &.empty
        background-image: radial-gradient(circle,#363636 6.266667vw,#444 0)
      &:before
        position: absolute
        top: 0
        right: 0
        bottom: 0
        left: 0
        background: url('') 50% no-repeat
        background-size: .45rem
        content: ""
      .cart_list_length
        position: absolute
        right: -.12rem
        top: -.12rem
        line-height: 1
        background-image: linear-gradient(-90deg,#ff7416,#ff3c15 98%)
        color: #fff
        border-radius: .32rem
        padding: .04rem .1rem
        font-size: .20rem
        transform: scale(0.9)
    .cart_icon_num.empty:before
      background-image: url('')
    .cart_num
      flex: 1
      p
        font-size: .24rem
        color: #999
    .gotopay
      height: 100%
      width: 1.8rem
      background-color: #38ca73
      text-align: center
      text-decoration: none
      user-select: none
      line-height: .96rem
      word-break: keep-all
      span
        color: #fff
        font-size: .3rem
        font-weight: 700
      &.btn_disabled
        background-color: #535356
  .cart_food_list
    position: fixed
    bottom: .96rem
    left: 0
    z-index: 9998
    width: 100%
    background-color: #fff
    transition: transform .3s ease
    .tag
      background-color: #fffad6
      border-top: .01rem solid #f9e8a3
      opacity: .96
      line-height: .4rem
      font-size: .24rem
      text-align: center
    header
      display: flex
      align-items: center
      padding: 0 .3rem
      border-bottom: .01rem solid #ddd
      background-color: #eceff1
      color: #666
      height: .8rem
      h4
        flex: 1
        font-size: .32rem
      .clear_cart
        display: flex
        align-items: center
        padding-left: .3rem
        color: #666
        text-decoration: none
        font-size: .26rem
        line-height: .4rem
        .iconfont
          font-size: .24rem
          margin-right: .05rem
    .cart_food_details
      max-height: 6rem
      overflow: auto
      .cart_food_li
        display: flex
        align-items: center
        padding: .15rem .25rem
        min-height: .8rem
        border-bottom: .01rem solid #f5f5f5
        .cart_list_num
          flex: 5.5
          font-size: .32rem
          ellipsis()
        .cart_list_price
          flex: 2.5
          text-align: right
          span
            white-space: nowrap
            font-size: .32rem
            font-weight: 700
            color: #ff5339
        .cart_list_control
          flex: 3
          display: flex
          justify-content: flex-end
          align-items: center
          a
            width: .44rem
            height: .44rem
            display: block
            color: #fff
            text-align: center
            line-height: .44rem
            border-radius: 100%
            background: #2396ff
            box-sizing: border-box
            .iconfont
              font-size: .24rem
          a.minus
            color: #2396ff
            background: #fff
            border: .01rem #2396ff solid
          span
            width: .5rem
            font-size: .28rem
            text-align: center
  .mask
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    z-index: 9997
    background: rgba(0, 0, 0, .5)
  .showcover-enter-active,
  .showcover-leave-active
    transition: opacity 0.3s
  .showcover-enter,
  .showcover-leave-active
    opacity: 0
  .toggle-cart-enter-active, .toggle-cart-leave-active
    transition: all .3s ease-out
  .toggle-cart-enter, .toggle-cart-leave-active
    transform: translateY(100%)
</style>
